<template>
  <div class="site-wrapper" :class="{ 'site-sidebar--fold': sidebarFold }" v-loading.fullscreen.lock="loading"
       element-loading-text="拼命加载中">
    <template v-if="!loading">
      <main-navbar/>
      <main-sidebar/>
      <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
        <main-content v-if="!$store.state.common.contentIsNeedRefresh"/>
      </div>
      <div style="height: 24px; line-height: 24px; text-align: right; padding-right: 42px; ">作者：WangPeng </div>
    </template>
  </div>
</template>

<script>
  import MainNavbar from './main-navbar'
  import MainSidebar from './main-sidebar'
  import MainContent from './main-content'
  import http from "../utils/httpRequest";

  export default {
    provide() {
      return {
        // 刷新
        refresh() {
          this.$store.commit('common/updateContentIsNeedRefresh', true)
          this.$nextTick(() => {
            this.$store.commit('common/updateContentIsNeedRefresh', false)
          })
        }
      }
    },
    data() {
      return {
        loading: true
      }
    },
    components: {
      MainNavbar,
      MainSidebar,
      MainContent
    },
    computed: {
      documentClientHeight: {
        get() {
          return this.$store.state.common.documentClientHeight
        },
        set(val) {
          this.$store.commit('common/updateDocumentClientHeight', val)
        }
      },
      sidebarFold: {
        get() {
          return this.$store.state.common.sidebarFold
        }
      },
      userId: {
        get() {
          return this.$store.state.user.id
        },
        set(val) {
          this.$store.commit('user/updateId', val)
        }
      },
      userName: {
        get() {
          return this.$store.state.user.name
        },
        set(val) {
          this.$store.commit('user/updateName', val)
        }
      }
    },
    created() {
      this.getUserInfo()
    },
    mounted() {
      this.resetDocumentClientHeight()
    },
    methods: {
      // 重置窗口可视高度
      resetDocumentClientHeight() {
        this.documentClientHeight = document.documentElement['clientHeight'] - 24
        window.onresize = () => {
          this.documentClientHeight = document.documentElement['clientHeight'] - 24
        }
      },
      // 获取当前管理员信息
      getUserInfo() {
        this.loading = false
        this.userId = 1
        this.userName = ''
        this.$http({
          url: this.$http.adornUrl('/api/userInfo'),
          method: 'post',
          params: this.$http.adornParams(),
          data: http.adornData({})
        }).then(({data}) => {
          if (data && data.code === '000000') {
            this.loading = false
            this.userId = data.userId
            this.userName = data.userName
            if (typeof (data.userName) == 'undefined' || data.userName == '') {
              this.userName = data.userId
            }
          } else {
            this.$message.error(data.msg)
            this.userName = '--';
          }
        })
      }
    }
  }
</script>
<style>
  .el-autocomplete-suggestion {
    width: auto !important;
    min-width: 210px;
  }

  .el-dialog__header {
    background-color: skyblue;
  }

  .rdonly input {
    height: 32px;
    line-height: 32px;
    background-color: #f6f6f6;
  }
  .rdonly textarea{
    background-color: #f6f6f6;
  }


  .rdonly .el-row .el-col .el-form-item {
    margin-bottom: 6px;
  }
  .rdonly .el-row .el-col label {
    line-height: 32px;
  }
  .rdonly .el-row .el-col div {
    line-height: 32px;
  }
  /*input[readonly] {*/
  /*  background-color: #f3f3f3;*/
  /*}*/

  .el-dialog {
    width: 68%;
  }

  .el-form-item {
    margin-bottom: 12px;
  }

  .want-to-say {
    line-height: 24px;
    margin-top: 24px;
    color: blue;
  }

  .el-dialog__body {
    padding: 10px 42px;
  }

  .demo-table-expand .el-form-item {
    margin-top: 10px;
  }

  .demo-table-expand .el-form-item__label {
    width: 140px;
    text-align: right;
  }

  .demo-table-expand .el-form-itemLine {
    width: 100%;
  }

  .demo-table-expand .el-form-itemLine .el-form-item__content {
    width: 85%;
  }

  .demo-table-expand .el-form-item__content {
    width: 70%;
  }

  .el-table .cell{
    padding: 0 6px;
  }

  .el-table__row--level-1 td{
    line-height: 18px;
    height: 18px;
    padding: 4px 0;
    background-color: #f9f9f9;
  }

</style>